Vue Js Hide the element until the Vue Instance is Ready:In Vue.js, the v-cloak directive is used to hide the text content of an element until the Vue.js app has finished compiling the template. This is useful in situations where you don’t want the text to appear before the Vue.js app has finished rendering the template. The text content is hidden by applying a CSS class, “v-cloak,” to the element. Once the app has finished rendering the template, the class is removed, and the text content becomes visible.
How do I hide the VueJS syntax while the page is loading?
In the below example, the message will be hidden until the vue app finishes compilation and the v-cloak class is removed.
The content of VueJS is hidden until the app finishes compilation.
<div id="app">
<div v-cloak>
{{ message }}
</div>
</div>
<style scoped>
[v-cloak] {
display: none;
}
</style>
Output of above example
